<template>
  <div class="box3">
    <div class="vis_card_t"><span>{{title}}</span></div>
    <div class="vis_card_tl"></div>
    <div class="vis_card_tr"></div>
    <div class="vis_card_cl"></div>
    <div class="vis_card_cr"></div>
    <div class="vis_card_b"></div>
    <div class="vis_card_body"><slot name="center"></slot></div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.box3 {
  position: relative;
  box-sizing: border-box;
  padding: 44px 16px 1px 16px;
  z-index: 3;
}

.box3 .vis_card_t {
  display: block;
  position: absolute;
  width: calc(100% - 32px);
  height: 44px;
  top: 0;
  left: 16px;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_t2.png) no-repeat center;
  z-index: 4;
  text-align: center;
  line-height: 32px;
  user-select: none;
}

.box3 .vis_card_t span {
  font-size: 20px;
  font-weight: bold;
  background-image: -webkit-linear-gradient(top, #1bdcff, #adf8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box3 .vis_card_tl {
  display: block;
  position: absolute;
  width: 16px;
  height: 42px;
  top: 0;
  left: 0;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_tl.png) no-repeat center;
  z-index: 4;
}

.box3 .vis_card_tr {
  display: block;
  position: absolute;
  width: 16px;
  height: 42px;
  top: 0;
  right: 0;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_tr.png) no-repeat center;
  z-index: 4;
}

.box3 .vis_card_cl {
  display: block;
  height: calc(100% - 42px);
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 16px;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_cl.png) no-repeat center bottom;
  z-index: 4;
}

.box3 .vis_card_cr {
  display: block;
  height: calc(100% - 42px);
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 16px;
  background: url(~@/assets/images/borderBox/box3/vis_card_bg_cr.png) no-repeat center bottom;
  z-index: 4;
}

.box3 .vis_card_b {
  display: block;
  position: absolute;
  width: calc(100% - 32px);
  height: 1px;
  bottom: 0;
  left: 16px;
  background: #2886ab;
  z-index: 4;
}

.box3 .vis_card_body {
  width: 100%;
  height: 100%;
  background: rgba(11, 62, 94, .45);
  min-height: 50px;
  color: #fff;
  padding-bottom: 15px;
  padding-top: 10px;
}
</style>